<template>
  <div>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '2']">
          <el-submenu index="1">
            <template slot="title"
              ><i
                class="el-icon-message"
                index="1-1"
                @click="getList(null)"
              ></i
              >日期信息</template
            >
            <el-submenu index="1-1">
              <template slot="title">年份</template>
              <el-menu-item index="1-1-1" @click="getList(2024)"
                >2024</el-menu-item
              >
              <el-menu-item index="1-1-2" @click="getList(2023)"
                >2023</el-menu-item
              >
              <el-menu-item index="1-1-3" @click="getList(2022)"
                >2022</el-menu-item
              >
              <el-menu-item index="1-1-4" @click="getList(2021)"
                >2021</el-menu-item
              >
              <el-menu-item index="1-1-5" @click="getList(2020)"
                >2020</el-menu-item
              >
              <el-menu-item index="1-1-6" @click="getList(2019)"
                >2019</el-menu-item
              >
              <el-menu-item index="1-1-6" @click="getList(2018)"
                >2018</el-menu-item
              >
            </el-submenu>
            <!-- <el-submenu index="1-2">
            <template slot="title">月份</template>
            <el-menu-item index="1-2-1" @click="getList(null, 'A区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-2" @click="getList(null, 'B区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-3" @click="getList(null, 'C区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
            <el-menu-item index="1-2-4" @click="getList(null, 'D区')"
              >1月</el-menu-item
            >
          </el-submenu> -->
          </el-submenu>
        </el-menu>
      </el-aside>
      <div ref="echartsContainer" style="width: 80%; height: 100vh"></div>
    </el-container>
  </div>
</template>  
  
<script>
// 引入ECharts主模块
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 引入提示框和标题组件
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
// 引入Canvas渲染器
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  BarChart,
  CanvasRenderer,
]);
import { getvehicleReport } from "@/api/system/storagemanagement";

export default {
  name: "EChartsStackedLine",
  seriesd: [],
  yuer:"",
  mounted() {
    this.initChart();
  },
  created() {
 this.getList(2024)
  },
  methods: {
    getList(query) {
      // this.yuer=query
      console.log(query)
      getvehicleReport(query).then((response) => {
        console.log(response.data);
        this.seriesd = response.data;
        this.initChart()
      });
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.echartsContainer);

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["固定车俩", "会员车俩", "临时车俩"],
        },
        grid: {
          left: "5%",
          right: "3%",
          bottom: "4%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
  
        series: this.seriesd
          // {
          //   name: '固定车俩',
          //   type: 'line',
          //   stack: 'Total',
          //   data: [120, 132, 101, 134, 90, 230, 210,0,0,0,0,0]
          // },
          // {
          //   name: '会员车俩',
          //   type: 'line',
          //   stack: 'Total',
          //   data: [220, 182, 191, 234, 290, 330, 310,0,0,0,0,0]
          // },
          // {
          //   name: '临时车俩',
          //   type: 'line',
          //   stack: 'Total',
          //   data: [150, 232, 201, 154, 190, 330, 410,0,0,0,0,0]
          // }
        // ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      // 监听窗口大小变化，以重新渲染图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>  
  
<style scoped>
/* 你可以在这里添加一些CSS样式 */
</style>